﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hierarchy Selector</title>
</head>
<body>
    <ul class="top">
        <li>
            List item #1
        </li>
        <li>
            List item #2
        </li>
        <li>
            List item #3
            <ul style="color: green">
                <li>
                    List item #3.1
                </li>
                <li>
                    List item #3.2
                </li>
            </ul>
        </li>
        <li>
            List item #4
        </li>
    </ul>
    <p>
        Paragraph #1
    </p>
    <p>
        Paragraph #2
    </p>
</body>
</html>
<script src="Scripts/jquery-2.1.4.js"></script>
<script language="javascript">
    $(function () {
        //all child of ul
        $("ul.top > li").css("border", "1px solid blue");
        //descendants of the <ul>
        //overrides the inner <ul> element's style="color: green" attribute.
        $("ul.top li").css("color", "brown");
        //colors red the first <p> element after the outermost <ul> element. The <p> element is a sibling of <ul>.
        $("ul+p").css("color", "red");
        //boldfaces all <p> sibling elements after the outermost <ul> element.
        $("ul~p").css("font-weight", "bold");
    });
</script>